<template>
	<view class="page-chat-detail">
		<cl-topbar :title="chatname"> </cl-topbar>

		<view class="container" >
			<view class="group">
				<cl-list label="群聊成员">
					{{users.length}}人
					<text slot="suffix" class="cl-icon-arrow-right"></text>
				</cl-list>

				<view class="users">
					<cl-avatar
						:size="65"
						v-for="(item, index) in users"
						:key="index"
						:src="item"
					></cl-avatar>
				</view>
			</view>

			<view class="group">
				<cl-list label="群聊名称">
					{{chatname}}
				</cl-list>
				<cl-list label="群号和二维码">{{chatid}}</cl-list>
			</view>

			<view class="group">
				<cl-list label="置顶聊天">
					<cl-switch active-color="#FFC100"></cl-switch>
				</cl-list>
				<cl-list label="消息免打扰">
					<cl-switch active-color="#FFC100"></cl-switch>
				</cl-list>
			</view>

			<cl-list justify="center" type="error">结束对话</cl-list>
		</view>
	</view>
</template>

<script>
import http from '@/common/requestConfig.js';
export default {
	components: {
		http
	},
	data() {
		return {
			users:[],
			chatid:0,
			chatname:"加载中..."
		};
	},
	onLoad() {
		this.GetInfo();
	},
	methods:{
		GetInfo(){
			let that = this;
			http.post("user/GetGroupInfo", {}
			).then(res => {
				res.chatuser.forEach(function(item,index,arr){
				   arr[index] = global.baseUrl + arr[index];
				})
				that.users = res.chatuser;
				that.chatid = res.chatid;
				that.chatname = res.chatname;
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f6f7f9;
}

.page-chat-detail {
	.users {
		display: flex;
		background-color: #fff;
		padding: 0 20rpx 30rpx 20rpx;

		.cl-avatar {
			margin-right: 30rpx;
		}
	}

	.group {
		margin-bottom: 20rpx;

		.cl-list {
			border: 0;
		}
	}
}
</style>
